<template>
  <div class="container-fluid" style="background-color:#f1f1f1;position:fixed;top:0;left:0;z-index:9999;height:80px;">
    <div class="container">
      <!-- navbar-light-->
      <nav role="navigation" class="navbar navbar-light navbar-expand-md" style="background-color:#f1f1f1;">
        <!-- LOGO -->
        <!--<a class="navbar-brand" href="javascript:void(0);">-->
          <!--<img src="../../assets/img/logo.png">-->
        <!--</a>-->
        <!--标题-->
        <h2 class="navbar-text">GDD宠物馆</h2>
        <!-- 菜单栏自适应按钮 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 菜单栏-->
        <div id="collapsibleNavbar" class="collapse navbar-collapse justify-content-end">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link class="nav-link" to="/website/home">首页</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/website/mall">宠物商城</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/login" replace>管理员登陆</router-link>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Header"
  }
</script>

<style scoped>
  /**
  当前路由激活时的样式
   */
  .router-link-active {
    border-bottom: 2px solid #886741
  }
</style>
